<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navs 导航 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col-lg-3">
            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            基础
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                        <div class="e-section-content e-section-content--border e-section-content--fit">
                            <ul class="e-nav">
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-drop"></i>
                                        <span class="e-nav-link-text">活动</span>
                                    </a>
                                </li>
                                <li class="e-nav-item active">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-alert-1"></i>
                                        <span class="e-nav-link-text">消息</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-danger badge--inline badge--pill badge--rounded">new</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-light"></i>
                                        <span class="e-nav-link-text">问题</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-cogwheel-1"></i>
                                        <span class="e-nav-link-text">设置</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-user"></i>
                                        <span class="e-nav-link-text">资料</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-success">5</span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!--begin::Dropdown-->
                    <div class="dropdown">
                        <a href="#" class="btn btn-brand btn-bold btn-sm dropdown-toggle" data-toggle="dropdown">
                            下拉示例
                        </a>
                        <div class="dropdown-menu dropdown-menu-sm" aria-labelledby="dropdownMenuButton">
                            <!--begin::Nav-->
                            <ul class="e-nav">
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-drop"></i>
                                        <span class="e-nav-link-text">活动</span>
                                    </a>
                                </li>
                                <li class="e-nav-item active">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-alert-1"></i>
                                        <span class="e-nav-link-text">消息</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-danger badge--inline badge--pill badge--rounded">new</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-light"></i>
                                        <span class="e-nav-link-text">问题</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-cogwheel-1"></i>
                                        <span class="e-nav-link-text">设置</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-user"></i>
                                        <span class="e-nav-link-text">资料</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-success">5</span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                            <!--end::Nav-->
                        </div>
                    </div>

                    <!--end::Dropdown-->
                </div>
            </div>
            <!--end::Card-->
            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            分类
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                        <div class="e-section-content">
                            你可以在<code>ul.e-nav</code>内添加<code>li.e-nav-section</code>作为导航的分类
                        </div>
                        <div class="e-section-content e-section-content--border e-section-content--fit">
                            <ul class="e-nav">
                                <li class="e-nav-section e-nav-section--first">
                                    <span class="e-nav-section-text">分类 1</span>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-drop"></i>
                                        <span class="e-nav-link-text">活动</span>
                                    </a>
                                </li>
                                <li class="e-nav-item active">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-alert-1"></i>
                                        <span class="e-nav-link-text">消息</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-danger badge--inline badge--pill badge--rounded">new</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-light"></i>
                                        <span class="e-nav-link-text">问题</span>
                                    </a>
                                </li>
                                <li class="e-nav-section e-nav-section--first">
                                    <span class="e-nav-section-text">分类 2</span>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-cogwheel-1"></i>
                                        <span class="e-nav-link-text">设置</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-user"></i>
                                        <span class="e-nav-link-text">资料</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-success">5</span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!--end::Section-->

                    <!--begin::Dropdown-->
                    <div class="dropdown">
                        <a href="#" class="btn btn-brand btn-bold btn-sm dropdown-toggle" data-toggle="dropdown">
                            下拉示例
                        </a>
                        <div class="dropdown-menu dropdown-menu-sm dropdown-menu-fit-bottom">

                            <!--begin::Nav-->
                            <ul class="e-nav">
                                <li class="e-nav-section e-nav-section--first">
                                    <span class="e-nav-section-text">分类 1</span>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-drop"></i>
                                        <span class="e-nav-link-text">活动</span>
                                    </a>
                                </li>
                                <li class="e-nav-item active">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-alert-1"></i>
                                        <span class="e-nav-link-text">消息</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-danger badge--inline badge--pill badge--rounded">new</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-light"></i>
                                        <span class="e-nav-link-text">问题</span>
                                    </a>
                                </li>
                                <li class="e-nav-section e-nav-section--first">
                                    <span class="e-nav-section-text">分类 2</span>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-cogwheel-1"></i>
                                        <span class="e-nav-link-text">设置</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-user"></i>
                                        <span class="e-nav-link-text">资料</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-success">5</span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                            <!--end::Nav-->
                        </div>
                    </div>
                    <!--end::Dropdown-->
                </div>
            </div>
            <!--end::Card-->
            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            Active & Disabled
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                        <div class="e-section-content">
                            你可以在<code>ul.e-nav > li.e-nav-item</code>上添加<code>.active</code>、<code>.disabled</code>选中或禁用导航
                        </div>
                        <div class="e-section-content e-section-content--border e-section-content--fit">
                            <ul class="e-nav">
                                <li class="e-nav-item active">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-drop"></i>
                                        <span class="e-nav-link-text">活动</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-alert-1"></i>
                                        <span class="e-nav-link-text">消息</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-danger badge--inline badge--pill badge--rounded">new</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="e-nav-item disabled">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-light"></i>
                                        <span class="e-nav-link-text">问题</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-cogwheel-1"></i>
                                        <span class="e-nav-link-text">设置</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-user"></i>
                                        <span class="e-nav-link-text">资料</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-success">5</span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!--end::Section-->

                    <!--begin::Dropdown-->
                    <div class="dropdown">
                        <a href="#" class="btn btn-brand btn-bold btn-sm dropdown-toggle" data-toggle="dropdown">
                            下拉示例
                        </a>
                        <div class="dropdown-menu dropdown-menu-sm">
                            <!--begin::Nav-->
                            <ul class="e-nav">
                                <li class="e-nav-item active">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-drop"></i>
                                        <span class="e-nav-link-text">活动</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-alert-1"></i>
                                        <span class="e-nav-link-text">消息</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-danger badge--inline badge--pill badge--rounded">new</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="e-nav-item disabled">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-light"></i>
                                        <span class="e-nav-link-text">问题</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-cogwheel-1"></i>
                                        <span class="e-nav-link-text">设置</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-user"></i>
                                        <span class="e-nav-link-text">资料</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-success">5</span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                            <!--end::Nav-->
                        </div>
                    </div>

                    <!--end::Dropdown-->
                </div>
            </div>
            <!--end::Card-->
        </div>
        <div class="col-lg-5">
            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            设置头部 & 底部
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                        <div class="e-section-info">
                            你可以在<code>ul.e-nav</code>内添加<code>li.e-nav-head</code>、<code>li.e-nav-foot</code>作为头部、底部
                        </div>
                        <div class="e-section-content e-section-content--border e-section-content--fit">
                            <!--begin::Nav-->
                            <ul class="e-nav">
                                <li class="e-nav-head">
                                    导航头部
                                </li>
                                <li class="e-nav-separator"></li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-drop"></i>
                                        <span class="e-nav-link-text">活动</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-light"></i>
                                        <span class="e-nav-link-text">问题</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-cogwheel-1"></i>
                                        <span class="e-nav-link-text">设置</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-user"></i>
                                        <span class="e-nav-link-text">资料</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-success">5</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="e-nav-separator"></li>
                                <li class="e-nav-foot">
                                    <a class="btn btn-danger btn-bold btn-sm" href="#">更新</a>
                                    <a class="btn btn-default btn-bold btn-sm" href="#" data-toggle="e-tooltip"
                                       data-placement="right" title="点击查看更多">更多</a>
                                </li>
                            </ul>

                            <!--end::Nav-->
                        </div>
                    </div>

                    <!--end::Section-->

                    <!--begin::Dropdown-->
                    <div class="dropdown">
                        <a href="#" class="btn btn-brand btn-bold btn-sm dropdown-toggle" data-toggle="dropdown">
                            下拉示例
                        </a>
                        <div class="dropdown-menu dropdown-menu-fit dropdown-menu-lg " aria-labelledby="dropdownMenuButton">

                            <!--begin::Nav-->
                            <ul class="e-nav">
                                <li class="e-nav-head">
                                    导航头部
                                </li>
                                <li class="e-nav-separator"></li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-drop"></i>
                                        <span class="e-nav-link-text">活动</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-light"></i>
                                        <span class="e-nav-link-text">问题</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-cogwheel-1"></i>
                                        <span class="e-nav-link-text">设置</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon-user"></i>
                                        <span class="e-nav-link-text">资料</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-success">5</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="e-nav-separator"></li>
                                <li class="e-nav-foot">
                                    <a class="btn btn-danger btn-bold btn-sm" href="#">更新</a>
                                    <a class="btn btn-clean btn-bold btn-sm" href="#" data-toggle="e-tooltip"
                                       data-placement="right" title="点击查看更多">更多</a>
                                </li>
                            </ul>

                            <!--end::Nav-->
                        </div>
                    </div>

                    <!--end::Dropdown-->
                </div>
            </div>
            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            使用<code>Bootstrap Collapse</code>实现展开/收起效果
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <div class="e-section">
                        <div class="e-section-info">
                            包含子菜单的静态导航
                        </div>
                        <div class="e-section-content e-section-content--border e-section-content--fit">
                            <ul class="e-nav">
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-rocket-1"></i>
                                        <span class="e-nav-link-text">活动</span>
                                    </a>
                                </li>
                                <li class="e-nav-item active">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-expand"></i>
                                        <span class="e-nav-link-text">消息</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-danger badge--inline badge--pill badge--rounded">new</span>
                                        </span>
                                    </a>
                                    <ul class="e-nav-sub">
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <span class="e-nav-link-bullet e-nav-link-bullet--line"><span></span></span>
                                                <span class="e-nav-link-text">通知</span>
                                            </a>
                                        </li>
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <span class="e-nav-link-bullet e-nav-link-bullet--line"><span></span></span>
                                                <span class="e-nav-link-text">事件</span>
                                                <span class="e-nav-link-badge">
                                                    <span class="badge badge-warning">3</span>
                                                </span>
                                            </a>
                                        </li>
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <span class="e-nav-link-bullet e-nav-link-bullet--line"><span></span></span>
                                                <span class="e-nav-link-text">日志</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-chat-1"></i>
                                        <span class="e-nav-link-text">问题</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-graph-1"></i>
                                        <span class="e-nav-link-text">设置</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-laptop"></i>
                                        <span class="e-nav-link-text">资料</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-success badge--inline badge--pill">23</span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="e-section">
                        <div class="e-section-info">
                            支持展开/收起的导航
                        </div>
                        <div class="e-section-content e-section-content--border e-section-content--fit">
                            <ul class="e-nav" id="nav">
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-rocket-1"></i>
                                        <span class="e-nav-link-text">活动</span>
                                    </a>
                                </li>
                                <li class="e-nav-item active">
                                    <a class="e-nav-link" id="nav-link-1" data-toggle="collapse" href="#nav-sub-1" aria-expanded="false">
                                        <i class="e-nav-link-icon flaticon2-expand"></i>
                                        <span class="e-nav-link-text">消息</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-danger badge--inline badge--pill badge--rounded">new</span>
                                        </span>
                                        <span class="e-nav-link-arrow"></span>
                                    </a>
                                    <ul class="e-nav-sub collapse show" id="nav-sub-1" role="tabpanel" data-parent="#nav">
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <span class="e-nav-link-bullet e-nav-link-bullet--line"><span></span></span>
                                                <span class="e-nav-link-text">通知</span>
                                            </a>
                                        </li>
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <span class="e-nav-link-bullet e-nav-link-bullet--line"><span></span></span>
                                                <span class="e-nav-link-text">事件</span>
                                                <span class="e-nav-link-badge">
                                                    <span class="badge badge-warning">3</span>
                                                </span>
                                            </a>
                                        </li>
                                        <li class="e-nav-item">
                                            <a href="#" class="e-nav-link">
                                                <span class="e-nav-link-bullet e-nav-link-bullet--line"><span></span></span>
                                                <span class="e-nav-link-text">日志</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-chat-1"></i>
                                        <span class="e-nav-link-text">问题</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-graph-1"></i>
                                        <span class="e-nav-link-text">设置</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <i class="e-nav-link-icon flaticon2-laptop"></i>
                                        <span class="e-nav-link-text">资料</span>
                                        <span class="e-nav-link-badge">
                                            <span class="badge badge-success badge--inline badge--pill">23</span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-lg-4">

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            导航图标
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">你可以在<code>span.e-nav-link-bullet</code>上添加<code>.e-nav-link-bullet--line</code>、<code>.e-nav-link-bullet--dot</code>设置使用<code>-</code>还是<code>·</code>作为图标</span>
                        <div class="e-section-content e-section-content--border e-section-content--fit">
                            <ul class="e-nav">
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <span class="e-nav-link-bullet e-nav-link-bullet--line"><span></span></span>
                                        <span class="e-nav-link-text">活动</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <span class="e-nav-link-bullet e-nav-link-bullet--line"><span></span></span>
                                        <span class="e-nav-link-text">消息</span>
                                    </a>
                                </li>
                                <li class="e-nav-item ">
                                    <a href="#" class="e-nav-link">
                                        <span class="e-nav-link-bullet e-nav-link-bullet--dot"><span></span></span>
                                        <span class="e-nav-link-text">问题</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <span class="e-nav-link-bullet e-nav-link-bullet--dot"><span></span></span>
                                        <span class="e-nav-link-text">设置</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!--end::Section-->

                    <!--begin::Dropdown-->
                    <div class="dropdown">
                        <a href="#" class="btn btn-brand btn-bold btn-sm dropdown-toggle" data-toggle="dropdown">
                            下拉示例
                        </a>
                        <div class="dropdown-menu dropdown-menu-sm">

                            <!--begin::Nav-->
                            <ul class="e-nav">
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <span class="e-nav-link-bullet e-nav-link-bullet--line"><span></span></span>
                                        <span class="e-nav-link-text">活动</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <span class="e-nav-link-bullet e-nav-link-bullet--line"><span></span></span>
                                        <span class="e-nav-link-text">消息</span>
                                    </a>
                                </li>
                                <li class="e-nav-item ">
                                    <a href="#" class="e-nav-link">
                                        <span class="e-nav-link-bullet e-nav-link-bullet--dot"><span></span></span>
                                        <span class="e-nav-link-text">问题</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a href="#" class="e-nav-link">
                                        <span class="e-nav-link-bullet e-nav-link-bullet--dot"><span></span></span>
                                        <span class="e-nav-link-text">设置</span>
                                    </a>
                                </li>
                            </ul>

                            <!--end::Nav-->
                        </div>
                    </div>

                    <!--end::Dropdown-->
                </div>
            </div>
            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            使用svg图标
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                        <div class="e-section-content e-section-content--border e-section-content--fit">
                            <ul class="e-nav" role="tablist">
                                <li class="e-nav-item active">
                                    <a class="e-nav-link" data-toggle="tab" href="#kt_profile_tab_personal_information"
                                       role="tab">
                                        <span class="e-nav-link-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="e-svg-icon">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <polygon id="Shape" points="0 0 24 0 24 24 0 24"/>
                                                    <path d="M18,14 C16.3431458,14 15,12.6568542 15,11 C15,9.34314575 16.3431458,8 18,8 C19.6568542,8 21,9.34314575 21,11 C21,12.6568542 19.6568542,14 18,14 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                                    <path d="M17.6011961,15.0006174 C21.0077043,15.0378534 23.7891749,16.7601418 23.9984937,20.4 C24.0069246,20.5466056 23.9984937,21 23.4559499,21 L19.6,21 C19.6,18.7490654 18.8562935,16.6718327 17.6011961,15.0006174 Z M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"/>
                                                </g>
                                            </svg>
                                        </span>
                                        <span class="e-nav-link-text">个人中心</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a class="e-nav-link" data-toggle="tab" href="#kt_profile_tab_account_information"
                                       role="tab">
                                        <span class="e-nav-link-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                 xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px"
                                                 viewBox="0 0 24 24" version="1.1" class="e-svg-icon">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect id="bound" x="0" y="0" width="24" height="24"/>
                                                    <path d="M6,2 L18,2 C18.5522847,2 19,2.44771525 19,3 L19,12 C19,12.5522847 18.5522847,13 18,13 L6,13 C5.44771525,13 5,12.5522847 5,12 L5,3 C5,2.44771525 5.44771525,2 6,2 Z M7.5,5 C7.22385763,5 7,5.22385763 7,5.5 C7,5.77614237 7.22385763,6 7.5,6 L13.5,6 C13.7761424,6 14,5.77614237 14,5.5 C14,5.22385763 13.7761424,5 13.5,5 L7.5,5 Z M7.5,7 C7.22385763,7 7,7.22385763 7,7.5 C7,7.77614237 7.22385763,8 7.5,8 L10.5,8 C10.7761424,8 11,7.77614237 11,7.5 C11,7.22385763 10.7761424,7 10.5,7 L7.5,7 Z"
                                                          id="Combined-Shape" fill="#000000" opacity="0.3"/>
                                                    <path d="M3.79274528,6.57253826 L12,12.5 L20.2072547,6.57253826 C20.4311176,6.4108595 20.7436609,6.46126971 20.9053396,6.68513259 C20.9668779,6.77033951 21,6.87277228 21,6.97787787 L21,17 C21,18.1045695 20.1045695,19 19,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,6.97787787 C3,6.70173549 3.22385763,6.47787787 3.5,6.47787787 C3.60510559,6.47787787 3.70753836,6.51099993 3.79274528,6.57253826 Z"
                                                          id="Combined-Shape" fill="#000000"/>
                                                </g>
                                            </svg>
                                        </span>
                                        <span class="e-nav-link-text">我的消息</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a class="e-nav-link" href="#" role="tab" data-toggle="e-tooltip" title=""
                                       data-placement="right" data-original-title="这里是Tooltip">
                                        <span class="e-nav-link-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                     xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px"
                                                     viewBox="0 0 24 24" version="1.1" class="e-svg-icon">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect id="bound" x="0" y="0" width="24" height="24"></rect>
                                                    <rect id="Rectangle-20" fill="#000000" x="4" y="5" width="16" height="3"
                                                          rx="1.5"></rect>
                                                    <path d="M5.5,15 L18.5,15 C19.3284271,15 20,15.6715729 20,16.5 C20,17.3284271 19.3284271,18 18.5,18 L5.5,18 C4.67157288,18 4,17.3284271 4,16.5 C4,15.6715729 4.67157288,15 5.5,15 Z M5.5,10 L12.5,10 C13.3284271,10 14,10.6715729 14,11.5 C14,12.3284271 13.3284271,13 12.5,13 L5.5,13 C4.67157288,13 4,12.3284271 4,11.5 C4,10.6715729 4.67157288,10 5.5,10 Z"
                                                          id="Combined-Shape" fill="#000000" opacity="0.3"></path>
                                                </g>
                                            </svg>
                                        </span>
                                        <span class="e-nav-link-text">我的任务</span>
                                    </a>
                                </li>
                                <li class="e-nav-separator"></li>
                                <li class="e-nav-item">
                                    <a class="e-nav-link" href="#" role="tab" data-toggle="e-tooltip" title=""
                                       data-placement="right" data-original-title="这里是Tooltip">
                                        <span class="e-nav-link-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                 xmlns:xlink="http://www.w3.org/1999/xlink"
                                                 width="24px" height="24px" viewBox="0 0 24 24"
                                                 version="1.1"
                                                 class="e-svg-icon e-svg-icon--danger">
                                                <g stroke="none" stroke-width="1" fill="none"
                                                   fill-rule="evenodd">
                                                    <rect id="bound" x="0" y="0" width="24"
                                                          height="24"/>
                                                    <path d="M12.7442084,3.27882877 L19.2473374,6.9949025 C19.7146999,7.26196679 20.003129,7.75898194 20.003129,8.29726722 L20.003129,15.7027328 C20.003129,16.2410181 19.7146999,16.7380332 19.2473374,17.0050975 L12.7442084,20.7211712 C12.2830594,20.9846849 11.7169406,20.9846849 11.2557916,20.7211712 L4.75266256,17.0050975 C4.28530007,16.7380332 3.99687097,16.2410181 3.99687097,15.7027328 L3.99687097,8.29726722 C3.99687097,7.75898194 4.28530007,7.26196679 4.75266256,6.9949025 L11.2557916,3.27882877 C11.7169406,3.01531506 12.2830594,3.01531506 12.7442084,3.27882877 Z M12,14.5 C13.3807119,14.5 14.5,13.3807119 14.5,12 C14.5,10.6192881 13.3807119,9.5 12,9.5 C10.6192881,9.5 9.5,10.6192881 9.5,12 C9.5,13.3807119 10.6192881,14.5 12,14.5 Z"
                                                          id="Combined-Shape" fill="#000000"/>
                                                </g>
                                            </svg>
                                        </span>
                                        <span class="e-nav-link-text">设置</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!--end::Section-->

                    <!--begin::Dropdown-->
                    <div class="dropdown">
                        <a href="#" class="btn btn-brand btn-bold btn-sm dropdown-toggle" data-toggle="dropdown">
                            下拉示例
                        </a>
                        <div class="dropdown-menu dropdown-menu-xl">
                            <ul class="e-nav" role="tablist">
                                <li class="e-nav-item active">
                                    <a class="e-nav-link" data-toggle="tab" href="#kt_profile_tab_personal_information"
                                       role="tab">
                                        <span class="e-nav-link-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="e-svg-icon">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <polygon id="Shape" points="0 0 24 0 24 24 0 24"/>
                                                    <path d="M18,14 C16.3431458,14 15,12.6568542 15,11 C15,9.34314575 16.3431458,8 18,8 C19.6568542,8 21,9.34314575 21,11 C21,12.6568542 19.6568542,14 18,14 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                                    <path d="M17.6011961,15.0006174 C21.0077043,15.0378534 23.7891749,16.7601418 23.9984937,20.4 C24.0069246,20.5466056 23.9984937,21 23.4559499,21 L19.6,21 C19.6,18.7490654 18.8562935,16.6718327 17.6011961,15.0006174 Z M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"/>
                                                </g>
                                            </svg>
                                        </span>
                                        <span class="e-nav-link-text">个人中心</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a class="e-nav-link" data-toggle="tab" href="#kt_profile_tab_account_information"
                                       role="tab">
                                        <span class="e-nav-link-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                 xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px"
                                                 viewBox="0 0 24 24" version="1.1" class="e-svg-icon">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect id="bound" x="0" y="0" width="24" height="24"/>
                                                    <path d="M6,2 L18,2 C18.5522847,2 19,2.44771525 19,3 L19,12 C19,12.5522847 18.5522847,13 18,13 L6,13 C5.44771525,13 5,12.5522847 5,12 L5,3 C5,2.44771525 5.44771525,2 6,2 Z M7.5,5 C7.22385763,5 7,5.22385763 7,5.5 C7,5.77614237 7.22385763,6 7.5,6 L13.5,6 C13.7761424,6 14,5.77614237 14,5.5 C14,5.22385763 13.7761424,5 13.5,5 L7.5,5 Z M7.5,7 C7.22385763,7 7,7.22385763 7,7.5 C7,7.77614237 7.22385763,8 7.5,8 L10.5,8 C10.7761424,8 11,7.77614237 11,7.5 C11,7.22385763 10.7761424,7 10.5,7 L7.5,7 Z"
                                                          id="Combined-Shape" fill="#000000" opacity="0.3"/>
                                                    <path d="M3.79274528,6.57253826 L12,12.5 L20.2072547,6.57253826 C20.4311176,6.4108595 20.7436609,6.46126971 20.9053396,6.68513259 C20.9668779,6.77033951 21,6.87277228 21,6.97787787 L21,17 C21,18.1045695 20.1045695,19 19,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,6.97787787 C3,6.70173549 3.22385763,6.47787787 3.5,6.47787787 C3.60510559,6.47787787 3.70753836,6.51099993 3.79274528,6.57253826 Z"
                                                          id="Combined-Shape" fill="#000000"/>
                                                </g>
                                            </svg>
                                        </span>
                                        <span class="e-nav-link-text">我的消息</span>
                                    </a>
                                </li>
                                <li class="e-nav-item">
                                    <a class="e-nav-link" href="#" role="tab" data-toggle="e-tooltip" title=""
                                       data-placement="right" data-original-title="这里是Tooltip">
                                        <span class="e-nav-link-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                 xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px"
                                                 viewBox="0 0 24 24" version="1.1" class="e-svg-icon">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect id="bound" x="0" y="0" width="24" height="24"></rect>
                                                    <rect id="Rectangle-20" fill="#000000" x="4" y="5" width="16" height="3"
                                                          rx="1.5"></rect>
                                                    <path d="M5.5,15 L18.5,15 C19.3284271,15 20,15.6715729 20,16.5 C20,17.3284271 19.3284271,18 18.5,18 L5.5,18 C4.67157288,18 4,17.3284271 4,16.5 C4,15.6715729 4.67157288,15 5.5,15 Z M5.5,10 L12.5,10 C13.3284271,10 14,10.6715729 14,11.5 C14,12.3284271 13.3284271,13 12.5,13 L5.5,13 C4.67157288,13 4,12.3284271 4,11.5 C4,10.6715729 4.67157288,10 5.5,10 Z"
                                                          id="Combined-Shape" fill="#000000" opacity="0.3"></path>
                                                </g>
                                            </svg>
                                        </span>
                                        <span class="e-nav-link-text">我的任务</span>
                                    </a>
                                </li>
                                <li class="e-nav-separator"></li>
                                <li class="e-nav-item">
                                    <a class="e-nav-link" href="#" role="tab" data-toggle="e-tooltip" title=""
                                       data-placement="right" data-original-title="这里是Tooltip">
                                        <span class="e-nav-link-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                 xmlns:xlink="http://www.w3.org/1999/xlink"
                                                 width="24px" height="24px" viewBox="0 0 24 24"
                                                 version="1.1"
                                                 class="e-svg-icon e-svg-icon-danger">
                                                <g stroke="none" stroke-width="1" fill="none"
                                                   fill-rule="evenodd">
                                                    <rect id="bound" x="0" y="0" width="24"
                                                          height="24"/>
                                                    <path d="M12.7442084,3.27882877 L19.2473374,6.9949025 C19.7146999,7.26196679 20.003129,7.75898194 20.003129,8.29726722 L20.003129,15.7027328 C20.003129,16.2410181 19.7146999,16.7380332 19.2473374,17.0050975 L12.7442084,20.7211712 C12.2830594,20.9846849 11.7169406,20.9846849 11.2557916,20.7211712 L4.75266256,17.0050975 C4.28530007,16.7380332 3.99687097,16.2410181 3.99687097,15.7027328 L3.99687097,8.29726722 C3.99687097,7.75898194 4.28530007,7.26196679 4.75266256,6.9949025 L11.2557916,3.27882877 C11.7169406,3.01531506 12.2830594,3.01531506 12.7442084,3.27882877 Z M12,14.5 C13.3807119,14.5 14.5,13.3807119 14.5,12 C14.5,10.6192881 13.3807119,9.5 12,9.5 C10.6192881,9.5 9.5,10.6192881 9.5,12 C9.5,13.3807119 10.6192881,14.5 12,14.5 Z"
                                                          id="Combined-Shape" fill="#000000"/>
                                                </g>
                                            </svg>
                                        </span>
                                        <span class="e-nav-link-text">设置</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!--end::Dropdown-->
                </div>
            </div>

            <!--end::Card-->
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>